<template>
  <div class="article">
    <el-button @click="show_save_dialog()">发布文章</el-button>
    <!-- 发布文章的对话框 -->
    <el-dialog :title="title" :visible.sync="dialog_save" width="80%">
      <!-- {{form}} -->
      <el-form :model="form">
        <el-form-item label="标题" :label-width="formLabelWidth_save">
          <el-input v-model="form.title"></el-input>
        </el-form-item>

        <el-form-item label="发表内容" :label-width="formLabelWidth_save">
          <Tinymce v-model="form.content"></Tinymce>
          <!-- <el-input type="textarea" v-model="form.content"></el-input> -->
        </el-form-item>

        <el-form-item label="所属分类" :label-width="formLabelWidth_save">
          <el-select v-model="form.categoryId" placeholder="请选择分类">
            <el-option
              v-for="item in category"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_save = false">取 消</el-button>
        <el-button type="primary" @click="save()">发 布</el-button>
      </div>
    </el-dialog>
    <!-- 文章列表 -->
    <el-table :data="article1.list" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180"> </el-table-column>
      <el-table-column prop="title" label="文章标题" width="180">
      </el-table-column>
      <el-table-column prop='content' label="文章内容">
        <template v-slot="scope">
          <div v-html="scope.row.content"></div>
        </template>
      </el-table-column>
      <el-table-column prop="publishTime" label="发布时间">
        <template v-slot="scope">
          <div>{{ scope.row.publishTime | dateFMT }}</div>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button @click="edit_article(scope.row)">修改</el-button>
          <el-button @click="delete_article(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页按钮 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="obj.pageSize"
      :current-page="obj.page"
      @current-change="change"
      :total="article1.total"
    >
    </el-pagination>
  </div>
</template>
<script>
import moment from "moment";
import { mapActions, mapState } from "vuex";
import Tinymce from "../../components/Tinymce";
export default {
  //注册组件
  components: {
    Tinymce,
  },
  computed: {
    ...mapState("article", ["article1", "category"]),
  },
  data() {
    return {
      title: "发布文章",
      dialog_save: false,
      formLabelWidth_save: "120px",
      obj: {
        page: 1,
        pageSize: 10,
      },
      total1: 0,
      form: {},
      options: [],
    };
  },
  methods: {
    ...mapActions("article", [
      "findAllCategory",
      "page_query_article",
      "saveOrUpdate",
      'delete_data'
    ]),
    //修改按钮
    edit_article(val) {
      //0.修改标题
      this.title = "修改文章";
      // 1.弹出模态框
      this.dialog_save = true;
      // 2.将当前行数据放入模态框
      this.form = JSON.parse(JSON.stringify(val));
    },
    //查询所有栏目
    findAll_category() {
      this.findAllCategory();
    },
    //分页查询
    page_article() {
      this.page_query_article(this.obj);
    },
    //删除文章
    delete_article(id) {
      var obj1 = {
        id: id,
      };
      this.delete_data(obj1).then((res)=>{
        if (res.status == 200) {
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: res.data.message,
            });
          }
          this.page_article();
      });
    },
    //页码改变
    change(page) {
      this.obj.page = page;
    },
    save() {
      this.saveOrUpdate(this.form).then((res) => {
        this.dialog_save = false;
        if (res.status == 200) {
          this.$notify({
            title: "成功",
            message: "发布成功",
            type: "success",
          });
          //清空模态框
          this.form = {};
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
        //刷新页面
        this.page_article();
      });
    },
    show_save_dialog() {
      this.title = "发布文章";
      this.dialog_save = true;
    },
  },
  //Vue中的生命周期函数
  created() {
    this.page_article();
    this.findAll_category();
  },
  //监听器
  // 当监听的变量发生变化时,执行监听中的代码
  watch: {
    obj: {
      handler: function () {
        this.page_article();
      },
      deep: true, //表示深度监听
    },
  },
  //过滤器 - 处理日期格式
  filters: {
    dateFMT(str) {
      var res = moment(str).format("YYYY-MM-DD HH:mm:ss");
      return res;
    },
  },
};
</script>